<template>
  <div class="page cube2">
    <div class="out">
      <div class="box">
        <div class="front"><span>落叶的一生，只是为了归根么。</span></div>
        <div class="top"><span>规则就是用来打破的!</span></div>
        <div class="left"><span>我宁愿犯错误，也不愿什么都不做。</span></div>
        <div class="right"><span>断剑重铸之日，其势归来之时。</span></div>
        <div class="bottom"><span>哪一个比较沉重，你的剑刃，还是你的过去?</span></div>
        <div class="back"><span>我不是英雄，我只是个拿锤子的小炮。</span></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {} from "vue";
</script>
<style lang="scss">
.cube2 {
  .out {
    height: 200px;
    width: 200px;
    margin: 100px auto;
    transform-style: preserve-3d;
    animation-name: cube2-turn;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: running;
  }
  .out:hover {
    animation-play-state: paused;
  }
  .box {
    position: relative;
    height: 200px;
    width: 200px;
    /*设置子元素变换后保留3d效果*/
    transform-style: preserve-3d;
    /* perspective: 2000px; */
    transform: rotateX(45deg) rotateY(45deg);
  }
  .box > div {
    position: absolute;
    width: 200px;
    height: 200px;
    font-size: 20px;
    border: 3px solid white;
    background-color: rgba(72, 219, 251, .1);
  }
  .box span {
    display: block;
    width: 120px;
    margin: 30px auto;
  }
  .box .front {
    transform: translateZ(100px);
  }
  .box .top {
    transform: translateY(-100px) rotateX(90deg) rotateZ(-90deg);
  }
  .box .left {
    transform: translateX(-100px) rotateX(-90deg) rotateY(-90deg);
  }
  .box .right {
    transform: translateX(100px) rotateY(90deg);
  }
  .box .bottom {
    transform: translateY(100px) rotateX(-90deg);
  }
  .box .back {
    transform: translateZ(-100px) rotateY(180deg) rotateZ(90deg);
  }
  @keyframes cube2-turn {
    from {
      transform: rotateY(0deg)
    }
    to {
      transform: rotateY(360deg)
    }
  }
}
</style>